<!--#include file="common_head.html"-->

<div class="uk-container">
    <ul class="uk-breadcrumb dux-page-crumb">
        <li><a href="/">首页</a></li>
        <!--loop{$pageInfo.crumb as $vo}-->
        <li><a href="{$vo.url}">{$vo.name}</a></li>
        <!--{/loop}-->
    </ul>
    <div class="dux-page-head">


        <div class="dux-shop-info uk-clearfix">
            <div class="show" data-dux="shop-show">
                <div class="preview">
                    <img src="{$info.image}" alt="">
                </div>
                <ul class="items uk-clearfix">
                    <!--loop{$info.images as $vo}-->
                    <li class="active"><img src="{$vo.url}"></li>
                    <!--{/loop}-->
                </ul>
            </div>
            <div class="info uk-clearfix">
                <div class="title">{$info.title}</div>
                <div class="subtitle">{$info.subtitle}</div>
                <div class="price">¥{$proInfo.sell_price}
                    <small>¥{$proInfo.market_price}</small>
                    <span class="store">剩余: {$proInfo.store}{$info.unit}</span>
                </div>

                <ul class="data uk-grid uk-grid-collapse uk-child-width-expand">
                    <li>
                        销量 <span>{$info.sale}</span>
                    </li>
                    <li>
                        评论 <span>{$info.comments}</span>
                    </li>
                    <li>
                        收藏 <span>{$info.favorite}</span>
                    </li>
                </ul>

                <div class="filter uk-clearfix">
                    <div data-dux="shop-sku">
                        <!--loop{$specList as $vo}-->
                        <dl class="uk-clearfix">
                            <dt>{$vo.name}</dt>
                            <dd class="items">
                                <!--loop{$vo.value as $v}-->
                                <!--if{$v == $vo.cur}-->
                                <a href="javascript:;" class="active" data-id="{$vo.id}" data-name="{$vo.name}"
                                   data-value="{$v}">
                                    <!--{else}-->
                                    <a href="javascript:;" data-id="{$vo.id}" data-name="{$vo.name}" data-value="{$v}">
                                        <!--{/if}-->
                                        {$v}</a>
                                    <!--{/loop}-->
                            </dd>
                        </dl>
                        <!--{/loop}-->
                    </div>
                    <dl class="uk-clearfix">
                        <dt>数量</dt>
                        <dd>
                            <div class="dux-page-count" data-count="{$proInfo.store}" data-dux="shop-count">
                                <a class="up">+</a>
                                <input type="tel" value="1" name="count" id="count" data-num>
                                <a class="down">-</a>
                            </div>
                        </dd>
                    </dl>
                </div>
                <div class="func">
                    <a class="uk-button uk-button-default uk-button-large" href="javascript:;"
                       data-url="{url('mall/Mall/buyCart')}"
                       data-params='{"pro_id" : {$proInfo.products_id}}' data-count="#count"
                       data-dux="shop-addCart"> 立即购买</a>
                    <a class="uk-button uk-button-primary uk-button-large" href="javascript:;"
                       data-url="{url('mall/Mall/addCart')}"
                       data-params='{"pro_id" : {$proInfo.products_id}}' data-count="#count"
                       data-dux="shop-addCart"><i class="fa fa-shopping-cart"></i> 加入购物车</a>
                    <a class="uk-button uk-button-default uk-button-large" href="javascript:;"
                       data-dux="shop-follow"
                       data-url="{url('mall/Mall/addFollow')}"
                       data-params='{"mall_id" : {$info.mall_id}}' data-status="{$info.follow}"
                       style="padding-left: 20px; padding-right: 20px;">
                        <i class="{$info.follow ? 'fa fa-heart' : 'fa fa-heart-o'}" data-icon></i>
                    </a>
                </div>
            </div>
        </div>


    </div>

    <br>
    <div class="dux-shop-layout uk-grid">
        <div class="uk-width-3-4">
            <div class="layout-body ">
                <ul class="dux-tab" uk-tab>
                    <li class="uk-active"><a href="#tab1">商品详情</a></li>
                    <li><a href="#tab2">商品评价 ({$info.comments})</a></li>
                    <li><a href="#tab3">商品咨询</a></li>
                </ul>
                <br>
                <div class="uk-switcher">
                    <div id="tab1">
                        <div class="dux-shop-text">
                            {html_out($info.content)}
                        </div>
                    </div>
                    <div id="tab2">
                        <div class="dux-comment-info uk-clearfix">
                            <div class="rate">
                                <strong>{$commentRate.positive ? $commentRate.positive : 100}
                                    <small>%</small>
                                </strong>
                                <p>好评度</p>
                            </div>
                            <div class="percent">
                                <dl>
                                    <dt>好评({$commentRate.positive}%)</dt>
                                    <dd>
                                        <progress class="uk-progress" value="50" max="100"></progress>
                                    </dd>
                                </dl>
                                <dl>
                                    <dt>中评({$commentRate.neutral}%)</dt>
                                    <dd>
                                        <progress class="uk-progress" value="{$commentRate.neutral}"
                                                  max="100"></progress>
                                    </dd>
                                </dl>
                                <dl>
                                    <dt>差评({$commentRate.negative}%)</dt>
                                    <dd>
                                        <progress class="uk-progress" value="{$commentRate.negative}"
                                                  max="100"></progress>
                                    </dd>
                                </dl>
                            </div>
                            <div class="info">
                                <p>购买商品后才可以评价</p>
                                <a class="uk-button uk-button-primary uk-button-small" href="{url('order/order/index')}"><i
                                        class="fa fa-comment-o"></i> 评价商品</a>
                            </div>
                        </div>


                        <div class="dux-comment-list">
                            <ul class="list-type uk-clearfix">
                                <li class="active">
                                    <a href="{url('shop/comment/index', ['id' => $info.mall_id, 'app' => 'mall'])}">全部评价</a>
                                </li>
                                <li>
                                    <a href="{url('shop/comment/index', ['id' => $info.mall_id, 'app' => 'mall', 'type' => 1])}">好评({$commentCount.positive})</a>
                                </li>
                                <li>
                                    <a href="{url('shop/comment/index', ['id' => $info.mall_id, 'app' => 'mall', 'type' => 2])}">中评({$commentCount.neutral})</a>
                                </li>
                                <li>
                                    <a href="{url('shop/comment/index', ['id' => $info.mall_id, 'app' => 'mall', 'type' => 3])}">差评({$commentCount.negative})</a>
                                </li>
                            </ul>

                            <!--if{empty($commentList)}-->
                            <div class="uk-padding uk-text-center">
                                暂无商品评论
                            </div>
                            <!--{/if}-->
                            <ul class="list-items">
                                <!--loop{$commentList as $vo}-->
                                <li class="uk-clearfix">
                                    <div class="user">
                                        <div class="img">
                                            <img src="{$vo.user_avatar}"
                                                 alt="">
                                        </div>
                                        <div class="name">{hide_str($vo.show_name, 3,4,4)}</div>
                                    </div>
                                    <div class="body">
                                        <div class="info uk-clearfix">
                                    <span class="stars">
                                        <!--for{$i = 1; $i <= $vo.level; $i++ }-->
                                        <i class="fa fa-star"></i>
                                        <!--{/for}-->
                                        </span>
                                            <span class="time">{date('Y-m-d H:i', $vo.time)}</span>
                                        </div>
                                        <div class="content">
                                            {$vo.content}
                                            <!--if{!empty($vo.images)}-->
                                            <ul class="images uk-clearfix">
                                                <!--loop{$vo.images as $img}-->
                                                <li>
                                                    <a href="{$img}" target="_blank"><img src="{$img}"></a>
                                                </li>
                                                <!--{/loop}-->
                                            </ul>
                                            <!--{/if}-->
                                        </div>

                                        <div class="spec">
                                            {$vo.spec}
                                        </div>
                                    </div>
                                </li>
                                <!--{/loop}-->
                            </ul>
                        </div>
                    </div>
                    <div id="tab3">
                        <div class="dux-ask-info uk-clearfix">
                            <div class="btn">
                                <button class="uk-button uk-button-primary"><i class="fa fa-comment-o"></i> 咨询商品
                                </button>
                            </div>
                            <div class="info">
                                因厂家更改产品包装、产地或者更换随机附件等没有任何提前通知，且每位咨询者购买情况、提问时间等不同，为此以下回复仅对提问者3天内有效，其他网友仅供参考！若由此给您带来不便请多多谅解，谢谢！
                            </div>
                        </div>
                        <div class="dux-comment-list dux-ask-list">


                            <ul class="list-items">

                                <!--loop{$faqList as $vo}-->
                                <li class="uk-clearfix">
                                    <div class="user">
                                        <div class="img">
                                            <img src="{$vo.user_avatar}"
                                                 alt="">
                                        </div>
                                        <div class="name">{hide_str($vo.show_name, 3,4,4)}</div>
                                    </div>
                                    <div class="body">
                                        <div><span class="time">{date('Y-m-d H:i', $vo.time)}</span></div>
                                        <div class="content">
                                            {$vo.content}
                                        </div>
                                        <!--if{$vo.reply}-->
                                        <div class="reply">回复：{$vo.reply}</div>
                                        <!--{/if}-->
                                    </div>
                                </li>
                                <!--{/loop}-->
                            </ul>


                            <!--if{!empty($faqList)}-->
                            <div class="uk-text-center uk-margin-top">
                                <a href="{url('shop/faq/index', ['id' => $info.mall_id, 'app' => 'mall'])}">查看全部问题...</a>
                            </div>
                            <!--{/loop}-->

                        </div>
                        <form class="dux-ask-form uk-form uk-margin-top" data-dux="form-bind" data-advanced="false"
                              method="post" action="{url('mall/mall/addFaq')}">
                            <div class="uk-form-group">
                                <textarea class="uk-textarea" name="content"
                                          placeholder="请填写您对本商品的咨询问题，客服人员将会为您解答，限100个字内"
                                          rows="3"></textarea>
                            </div>
                            <input type="hidden" name="mall_id" value="{$info.mall_id}">
                            <button type="submit" class="uk-button uk-button-primary">提交咨询</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <div class="layout-sidebar uk-width-1-4">
            <div class="dux-page-box">
                <div class="box-title">商品推荐</div>

                <ul class="dux-shop-sidebar">
                    <!--list{app="mall" label="contentList" class_id=$info.class_id limit=6 where="mall_id not in(".$info['mall_id'].")"}-->
                    <li class="dux-shop-item">
                        <div class="img">
                            <a href="{$list.url}"><img
                                    src="{$list.image}"
                                    alt="{$list.title}"></a>
                        </div>
                        <div class="title"><a href="{$list.url}">{$list.title}</a></div>
                        <div class="price">
                            ￥{$list.sell_price}
                        </div>
                    </li>
                    <!--{/list}-->
                </ul>
            </div>
        </div>
    </div>

</div>
<script>
    var productJson = {json_encode($skuList)};
</script>
<!--#include file="common_footer.html"-->
</html>